<template>
    <div>
        <el-row :gutter="20" id="pageTop">
            <el-col :span="6">
                <el-card shadow="hover" class="mgb20" style="height:252px;">
                    <div class="user-info">
                        <img src="../../assets/img/img.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{adminInfo.name}}</div>
                            <div>{{adminInfo.role}}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        <span class="user-info-list-div">上次登录时间：</span>
                        <span>{{adminInfo.created_at}}</span>
                    </div>
                    <div class="user-info-list">
                        <span class="user-info-list-div">上次登录地址：</span>
                        <span>{{adminInfo.ip}}</span>
                    </div>
                </el-card>
                <el-card shadow="hover" class="ratio-card" style="height:228px;">
                    <div slot="header" class="clearfix">
                        <span>销售占比</span>
                    </div>普通订单
                    <el-progress :percentage="home_info.other_ratio" color="rgb(45, 140, 240)"></el-progress>秒杀订单
                    <el-progress :percentage="home_info.seckill_ratio" color="#f1e05a"></el-progress>拼团订单
                    <el-progress :percentage="home_info.group_ratio" color="#f56c6c"></el-progress>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="6" class="col-padding">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{home_info.user_number}}</div>
                                    <div>用户注册量</div>
                                    <div class="user-num">
                                        <div class="user-num-item">
                                            <div>今日新增</div>
                                            <div
                                                v-if="home_info.user_new_num&&home_info.user_new_num.curr_day"
                                            >{{home_info.user_new_num.curr_day}}</div>
                                        </div>
                                        <div class="user-num-item">
                                            <div>本周新增</div>
                                            <div
                                                v-if="home_info.user_new_num&&home_info.user_new_num.curr_week"
                                            >{{home_info.user_new_num.curr_week}}</div>
                                        </div>
                                        <div class="user-num-item">
                                            <div>本月新增</div>
                                            <div
                                                v-if="home_info.user_new_num&&home_info.user_new_num.curr_month"
                                            >{{home_info.user_new_num.curr_month}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6" class="col-padding">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i
                                    class="el-icon-lx-recharge grid-con-icon"
                                    style="background-color:#BEC986"
                                ></i>
                                <div class="grid-cont-right">
                                    <div
                                        class="grid-num"
                                        style="color:#BEC986"
                                    >{{home_info.money_count}}</div>
                                    <div>用户总余额</div>
                                    <div class="user-num">
                                        <div class="user-num-item">
                                            <div>用户总积分</div>
                                            <div>{{home_info.integral_count}}</div>
                                        </div>
                                        <div class="user-num-item">
                                            <div>钻石总数量</div>
                                            <div>{{home_info.diamond_count}}</div>
                                        </div>
                                        <!-- <div class="user-num-item">
                      <div>累计总积分</div>
                      <div>{{home_info.total_integral}}</div>
                                        </div>-->
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6" class="col-padding">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-notice grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div
                                        class="grid-num"
                                        style="color:rgb(100, 213, 114)"
                                    >{{home_info.order_number}}</div>
                                    <div>订单总量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6" class="col-padding">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{home_info.sale_number}}</div>
                                    <div>销售总额</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card shadow="hover" style="height:380px;">
                    <div slot="header" class="clearfix">
                        <span>本月销量排行榜</span>
                        <!-- <el-button style="float: right; padding: 3px 0"
                       type="text"
                        @click="toOrder">查看更多</el-button>-->
                    </div>
                    <el-table
                        :show-header="true"
                        :data="home_info.sales"
                        style="width:100%;"
                        class="table"
                        header-cell-class-name="table-header"
                    >
                        <el-table-column label="产品名称" prop="name"></el-table-column>
                        <el-table-column label="销量" prop="num"></el-table-column>
                        <!-- <el-table-column label="商品类型">
              <template slot-scope="scope">
                <span v-if="scope.row.plate_type==2">
                  拼团
                </span>
                <span v-else-if="scope.row.plate_type==3">
                  秒杀
                </span>
                <span v-else>
                  普通
                </span>
              </template>
                        </el-table-column>-->
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12" v-if="options">
                <el-card shadow="hover">
                    <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
                </el-card>
            </el-col>
            <el-col :span="12" v-if="home_info.month_data">
                <el-card shadow="hover">
                    <schart
                        ref="liner"
                        class="schart"
                        canvasId="liner"
                        :options="home_info.month_data"
                    ></schart>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" v-if="home_info.user_data">
            <el-col :span="24">
                <el-card shadow="hover">
                    <schart
                        ref="lines"
                        style="width:100%"
                        class="schart"
                        canvasId="lines"
                        :options="home_info.user_data"
                    ></schart>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" v-if="home_info.user_active_data">
            <el-col :span="24">
                <el-card shadow="hover">
                    <schart
                        ref="lines2"
                        style="width:100%"
                        class="schart"
                        canvasId="lines2"
                        :options="home_info.user_active_data"
                    ></schart>
                </el-card>
            </el-col>
        </el-row>
        <div class="suspension" title="点击刷新实时数据" @click="refreshHome">刷新数据</div>
    </div>
</template>

<script>
import Schart from 'vue-schart'
import bus from '../common/bus'
export default {
  name: 'dashboard',
  data () {
    return {
      adminInfo: {
        role: '',
        name: '',
        username: '',
        login_district: '',
        created_at: ''
      },
      home_info: {},
      options: {}
    }
  },
  components: {
    Schart
  },
  computed: {

  },
  mounted () {
    this.adminInfo = this.$cookies.get('adminInfo')

  },
  /***
   * 实例已经创建开始初始数据
   */
  created () {
    this.handleListener()
    let that = this
    // that.api.home(function (data) {
    //   that.home_info = data;
    //   that.options = data.week_data;
    // });
  },
  activated () {
    this.handleListener()
  },
  deactivated () {
    window.removeEventListener('resize', this.renderChart)
    bus.$off('collapse', this.handleBus)
  },
  methods: {
    refreshHome () {
      this.options = null
      this.api.refreshHome(data => {
        this.home_info = data
        this.options = data.week_data
        window.removeEventListener('resize', this.renderChart)
        bus.$off('collapse', this.handleBus)
        this.handleListener()
        document.getElementById("pageTop").scrollIntoView()
        this.$message.success('刷新成功')
      })
    },

    toOrder () {
      this.$router.push({
        name: `order`
      })
    },
    handleListener () {
      bus.$on('collapse', this.handleBus)
      // 调用renderChart方法对图表进行重新渲染
      window.addEventListener('resize', this.renderChart)
    },
    handleBus (msg) {
      setTimeout(() => {
        this.renderChart()
      }, 1000)
    },
    renderChart () {
      // this.$refs.bar.renderChart()
      // this.$refs.lines.renderChart()
      // this.$refs.liner.renderChart()
      // this.$refs.lines2.renderChart()
    }
  },
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}
.col-padding {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}
.user-info-list > .user-info-list-div {
    width: 100px;
    text-align: right;
    margin-left: 0;
    display: inline-block;
}
.user-info-list span {
    margin-left: 30px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
#lines {
    width: 100%;
}
.user-num {
    display: flex;
    flex-flow: nowrap row;
    align-items: center;
    justify-content: space-between;
    color: #daaf62;
    font-size: 13px;
    width: 100%;
}
.user-num-item {
    flex: 1;
    display: flex;
    flex-flow: wrap column;
    justify-content: center;
}
.suspension {
    position: fixed;
    z-index: 999;
    right: 0;
    bottom: 20%;
    width: 60px;
    height: 60px;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.suspension:hover {
    background: rgba(0, 0, 0, 0.6);
}
</style>

<style>
.ratio-card .el-progress-bar {
    width: 95% !important;
}
</style>
